<template>
    <div class="box">
        <div class="changeData">
            <a-tooltip placement="bottom" color="#EE6666">
                <template #title>
                    <span>点击切换</span>
                </template>
                <sync-outlined class="refe" />
            </a-tooltip>
        </div>
        <div class="list">
            <Tag3 :data="seriesData" />
        </div>
        <div class="message">
            <a-button type="primary" class="btn-message">留言</a-button>
            <p>欢迎在此留言，您的意见对我们非常重要！</p>
        </div>
    </div>

</template>
<script setup lang="ts">
import { reactive } from "vue"
import Tag3 from "../../components/provider/tag-3.vue"
import {
    SyncOutlined,
} from '@ant-design/icons-vue'

const seriesData = reactive<any>([{
    depth: 0,
    id: 'option',
    index: 0,
    value: 0,
    msg: ""
},
]);
for (var i = 1; i < 100; i++) {
    seriesData.push({
        depth: 1,
        id: 'option.dataZoom' + i,
        index: 1,
        value: Math.floor(Math.random() * 100),
        msg: "这是option的描述信息"
    });
}

</script>
<style scoped lang="scss">
.box {
    text-align: center;
    background-color: #f9f8f7;

    .changeData {
        text-align: right;
        padding-right: 22%;

        &:hover {
            color: #3b5b9a;
        }

        .refe {
            font-size: 22px;
            cursor: pointer;
            color: #EE6666;
            z-index: 1000;
            position: fixed;

        }

        .refe:hover {
            color: #ff0000;
        }
    }

    .list {
        margin: 0 5px;
        height: 720px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .message {
        text-align: center;
        margin-top: 40px;

        .btn-message {
            margin-bottom: 10px;
            background-color: orange;
            color: white;
            width: 200px;
            height: 50px;
            font-weight: 600;
            font-size: large;
        }

        .btn-message:hover {
            background-color: #ff8c00;
        }

        p {
            font-size: 0.9em;
        }
    }
}
</style>